<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row :gutter="24">
        <a-col :span="4">
          <!-- 部门树 -->
          <dept-tree ref="deptTree" :deptOptions="deptOptions" @select="clickDeptNode" />
        </a-col>
        <a-col :span="20">
          <!-- 条件搜索 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="24">
                  <a-form-item label="名字">
                    <a-input v-model="queryParams.name" placeholder="请输入名字" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="出生日期">
                    <a-date-picker
                      v-model="queryParams.birthday"
                      style="width: 100%"
                      placeholder="请选择出生日期"
                      allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="手机号码">
                    <a-input v-model="queryParams.phone" placeholder="请输入手机号码" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="邮箱">
                    <a-input v-model="queryParams.email" placeholder="请输入邮箱" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="入职时间">
                    <a-date-picker
                      v-model="queryParams.hireDate"
                      style="width: 100%"
                      placeholder="请选择入职时间"
                      allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <span class="table-page-search-submitButtons" style="float: right;">
                    <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                    <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>

          <!-- 操作 -->
          <div class="table-operations">
            <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:staff:add']">
              <a-icon type="plus" />新增
            </a-button>
            <a-button
              type="primary"
              :disabled="single"
              @click="$refs.createForm.handleUpdate( ids)"
              v-hasPermi="['system:staff:edit']">
              <a-icon type="edit" />修改
            </a-button>
            <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:staff:remove']">
              <a-icon type="delete" />删除
            </a-button>
            <a-button
              type="dashed"
              @click="$refs.importExcel.importExcelHandleOpen()"
              v-hasPermi="['system:staff:import']">
              <a-icon type="import" />导入
            </a-button>
            <a-button
              type="primary"
              @click="handleExport"
              style="margin-left: 8px"
              v-hasPermi="['system:staff:export']">
              <a-icon type="download" />导出
            </a-button>
          </div>

          <!-- 上传文件 -->
          <import-excel ref="importExcel" @ok="getList" />
          <!-- 创建/编辑用户,单独封装了组件 -->
          <create-form
            ref="createForm"
            :deptOptions="deptOptions"
            :sexOptions="dict.type['sys_user_sex']"
            @ok="getList"
            @select-tree="getDeptTree" />
          <!-- 数据展示 -->
          <a-table
            :loading="loading"
            :rowKey="'staffId'"
            :dataSource="staffList"
            :pagination="false"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns">
            <template slot="birthday" slot-scope="text, record">
              {{ record.birthday }}
            </template>
            <template slot="hireDate" slot-scope="text, record">
              {{ record.hireDate }}
            </template>
            <template slot="sex" slot-scope="text, record">
              {{ record.sex === '0' ? '男' : record.sex === '1' ? '女' : '未知' }}
            </template>
            <template slot="operation" slot-scope="text, record">

              <a-divider type="vertical" />
              <a @click="handleDelete(record)">
                <a-icon type="delete" />删除
              </a>
            </template>
          </a-table>

          <!-- 分页 -->
          <a-pagination
            class="ant-table-pagination"
            show-size-changer
            show-quick-jumper
            :current="queryParams.pageNum"
            :total="total"
            :page-size="queryParams.pageSize"
            @showSizeChange="onShowSizeChange"
            @change="changeSize" />
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { listStaff, delStaff } from '@/api/system/staff'
import { deptTreeSelect } from '@/api/system/user'
import { tableMixin } from '@/store/table-mixin'
import CreateForm from './modules/CreateForm'
import DeptTree from './modules/DeptTree'
import ImportExcel from './modules/ImportExcel'

export default {
  name: 'Staff',
  mixins: [tableMixin],
  components: {
    CreateForm,
    ImportExcel,
    DeptTree
  },
  dicts: ['sys_user_sex'],
  data () {
    return {
      loading: false,
      staffList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        deptId: null,
        sex: null,
        birthday: null,
        phone: null,
        email: null,
        hireDate: null
      },
      // 部门树选项
      deptOptions: [{
        id: 0,
        label: '',
        children: []
      }],
      columns: [
        {
          title: '教职工id',
          dataIndex: 'staffId',
          align: 'center'
        },
        {
          title: '名字',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '部门',
          dataIndex: 'deptName',
          align: 'center'
        },
        {
          title: '用户性别',
          dataIndex: 'sex',
          align: 'center',
          scopedSlots: { customRender: 'sex' }
        },
        {
          title: '出生日期',
          dataIndex: 'birthday',
          align: 'center',
          scopedSlots: { customRender: 'birthday' }
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          align: 'center'
        },
        {
          title: '入职时间',
          dataIndex: 'hireDate',
          align: 'center',
          scopedSlots: { customRender: 'hireDate' }
        },
        {
          title: '备注',
          dataIndex: 'remark',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      ids: [],
      single: true,
      multiple: true
    }
  },
  created () {
    this.getList()
    this.getDeptTree()
  },
  methods: {
    getList () {
      this.loading = true
      listStaff(this.queryParams).then((response) => {
        this.staffList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.staffId)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 查询部门下拉树结构 */
    getDeptTree () {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
      })
    },
    clickDeptNode (deptId) {
      this.queryParams.deptId = deptId
      this.handleQuery()
    },
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: null,
        deptId: null,
        sex: null,
        birthday: null,
        phone: null,
        email: null,
        hireDate: null
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParams.pageNum = current
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    handleDelete (record) {
      const staffId = record.staffId || this.ids
      this.$confirm({
        title: '确认删除?',
        content: `是否确认删除编号为${staffId}的教职员工数据?`,
        onOk: () => {
          return delStaff(staffId).then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
        },
        onCancel () { }
      })
    },
    handleExport () {
      this.download('system/staff/export', { ...this.queryParams }, `staff_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style scoped>
.table-page-search-wrapper {
  margin-bottom: 20px;
}

.table-operations {
  margin-bottom: 20px;
}

.ant-table-pagination {
  margin-top: 20px;
}
</style>
